<template>
    <div class="starBox">
        <i class="statIcon" :class="sitem <= defaultRating?'on':''" :key="sindex" v-for="(sitem, sindex) in starNum" @click="selectStar(sindex)"></i>
    </div>
</template>
<script>
    export default {
        name: 'setStarNum',
        props: {
            starNum: {
                // 星星的个数
                type: Number,
                default: 5,
            },
            defaultRating: {
                // 默认点亮的个数
                type: Number,
                default: 4,
            },
            ableClick:{
                type: Boolean,
                default: true,
            }
        },
        data(){
            return {
                //sdefaultRating: 0
            }
        },
        created(){
            //this.sdefaultRating = this.defaultRating
        },
        methods:{
            selectStar(sindex){
                if(!this.ableClick) return
                this.$emit('update:defaultRating', sindex + 1)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .starBox{
        display: flex;
        align-items: center;
        .statIcon{
            display: block;
            width: 1rem;
            height: 1rem;
            margin-right: 0.5rem;
            background: url(~@/assets/unselectStar.png) no-repeat;
            background-size: cover;
            &.on{
                background: url(~@/assets/selectStar.png) no-repeat;
                background-size: cover;
            }
        }
    }

</style>